<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin:100px auto;
            width: 500px;
            height: 300px;
        }
        table,tr,td{
            border: 2px solid #333333;
            border-collapse: collapse;
            text-align: center;
            font-size: 20px;
            font-family: FangSong;
            font-weight: 500;
        }
        thead{
            background-color: #0A7EC3;
            font-size: 20px;
            font-weight: 500;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <td><h3>序号</h3></td>
        <td><h3>姓名</h3></td>
        <td><h3>科目</h3></td>
        <td><h3>分数</h3></td>
    </tr>
    </thead>
    <tbody id="tbodyid">
    <tr>
        <td>1</td>
        <td>梅西</td>
        <td>足球</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>c罗</td>
        <td>英语</td>
        <td>100</td>
    </tr>
    <tr>
        <td>3</td>
        <td>皮尔洛</td>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>4</td>
        <td>呱呱</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>
<script>
    var tbodyArr=document.getElementById("tbodyid");
    var trArr=tbodyArr.getElementsByTagName("tr");
    for(var i=0;i<trArr.length;i++){
        if (i%2===0){
            trArr[i].style.backgroundColor="#ffa8e7";
        }else{
            trArr[i].style.backgroundColor="#c3c3c3";
        }
        //1.获取事件源以及相关属性 get it
        //2.绑定事件
        var color="";//使用计数器原理
        trArr[i].onmouseover=function () {
            // alert("有作用");
             color=this.style.backgroundColor;
            this.style.backgroundColor="#fff";
        }
        trArr[i].onmouseout=function () {
            // alert("有作用");
            this.style.backgroundColor=color;
        }
    }
</script>
</body>
</html>